<template>
	<div>
		<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
		<el-tree class="filter-tree" @node-click="handleNodeClick" :data="treeList" :props="defaultProps" default-expand-all
			:filter-node-method="filterNode" :show-checkbox="showCheckbox" :render-content="renderContent"
			:check-strictly="checkStrictly" ref="tree">
		</el-tree>
	</div>
</template>
<style scoped></style>

<script>
import { listDevice } from "@/api/vplat/device";
import { listDept } from "@/api/system/dept";
export default {
	name: "DeviceTree",
	dicts: [],
	props: ['showCheckbox', 'renderContent', 'checkStrictly'],
	data() {
		return {
			filterText: '',
			lastClickTime: 0, // 用于存储上次点击的时间
			clickNode: null,// 用于存储上次点击的节点
			/*
			treeList: [{
				id: 1,
				label: '总部',
				nodeType: 'org',
				children: [{
					id: 2,
					label: '深圳',
					nodeType: 'org',
					children: []
				}]
			}],
			*/
			treeList: [],
			defaultProps: {
				children: 'children',
				label: 'label'
			}
		};
	},
	created() {

	},
	mounted() {
		this.getTreeList();
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		},
	},
	methods: {
		handleNodeDblClick(data, node, component) {
			//console.log(data);
			//this.$store.dispatch('video/addPlayAction', data);
			this.$store.commit('video/addPlay', null);//先设置为空,保证多次点击同一节点时其他组件引用能触发computed逻辑
			this.$store.commit('video/addPlay', data);
			//this.$store.commit('addPlay', data);
		},
		handleNodeClick(data, node, component) {
			if (data.nodeType != null && data.nodeType == 'IPC') {
				const now = new Date().getTime();
				if (now - this.lastClickTime < 300) { // 如果两次点击之间的时间差小于300毫秒，则认为是双击
					//data.clickTime = now; //多次点击同一个节点,若数据没变化,其他的组件的computed逻辑不生效
					this.lastClickTime = 0; // 重置上次点击时间  
					this.clickNode = null; // 重置上次点击的节点  
					this.handleNodeDblClick(data, node, component); // 调用双击事件处理函数  
				} else {
					this.lastClickTime = now; // 更新上次点击时间  
					this.clickNode = node; // 更新上次点击的节点  
				}
			} else if (data.nodeType != null && data.nodeType == 'org' && data.children.length == 0 && data.isLeafNode == true) {
				this.getDeviceList(data);
			}
			this.$emit('handleNodeClick', data);
		},
		filterNode(value, data) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		},
		/** 查询设备树 */
		getTreeList() {
			this.loading = true;
			listDept(this.queryParams).then(response => {
				let deptList = this.handleTree(response.data, "deptId");
				let tree = [];
				this.mapTreeList(tree, deptList);
				this.treeList = tree;
				this.loading = false;
			});
		},
		/** 根据节点查询设备 */
		getDeviceList(node) {
			//父组件解除绑定时node为设备节点
			if (node.nodeType != null && node.nodeType == 'IPC') {
				let parentNode = this.getParentNode(node, this.treeList);
				console.log(parentNode);
				node = parentNode;
			}

			this.loading = true;
			let queryParams = {
				pageNum: 1,
				pageSize: 10000,
				deptId: node.id
			};
			listDevice(queryParams).then(response => {
				let deviceList = response.rows;
				deviceList = deviceList.map(device => {
					device.label = device.name;
					device.nodeType = "IPC";
					return device;
				});
				node.children = deviceList;
				this.loading = false;
			});
		},
		/*对数据封装为前端树节点*/
		mapTreeList(children, nodes) {
			nodes.forEach((o, i) => {
				let node = {
					id: o.deptId,
					label: o.deptName,
					parentId: o.parentId,
					nodeType: 'org',
					isLeafNode: false,
					children: []
				}
				children.push(node);
				if (o.children != null && o.children.length > 0) {
					this.mapTreeList(node.children, o.children);
				} else {
					node.isLeafNode = true;
				}
			});
		},
		/*获取数据的父节点*/
		getParentNode(childrenNode, nodes) {
			for (let i = 0; i < nodes.length; i++) {
				let node = nodes[i];
				if (node.children != null && node.children.length > 0) {
					for (let j = 0; j < node.children.length; j++) {
						let c = node.children[j];
						if (c.id == childrenNode.id) {
							return node;
						} else {
							let parentNode = this.getParentNode(childrenNode, node.children);
							if(parentNode != null){
								return parentNode;
							}
						}
					}
				}
			}
			return null;
		},
	}
};
</script>

